<template>
  <div id="app">
    <Header></Header>
    <main id="Login">
      <div class="login-a">
        <!-- 登录 -->
        <div v-if="loginChange" class="login-s">
          <h2>登录</h2>
          <form action="">
            <div class="form-i">
              <el-input placeholder="请输入手机号" v-model="username" @keyup="usernameInput" @keydown.enter.prevent style="height: 50px"></el-input>
              <span>{{ usernameSpan }}</span>
            </div>
            <div class="form-i">
              <div class="vcode">
                <el-input placeholder="请输入验证码" v-model="vcodeInp" @keyup="vcodeInput" @keydown.enter.prevent style="height: 50px;width: 213px">
                </el-input>
                <div class="vcode-t" @click="vcodeBut">{{ vcode }}</div>
              </div>
              <span>{{ vcodeSpan }}</span>
            </div>
            <div class="form-i">
              <el-input placeholder="请输入密码" v-model="password" @keyup="passwordInput" @keydown.enter.prevent show-password
                style="height: 50px"></el-input>
              <span>{{ passwordSpan }}</span>
            </div>
          </form>
          <button @click="loginBut">立即登录</button>
          <div class="password-f">
            <div class="cursorP" @click="forgotPasswordSwitch">忘记密码</div>
            <div @click="signSwitch">注册</div>
          </div>
          <div class="third-party-login">
            <div class="h-line">
              <div class="line"></div>
              <div>第三方登录</div>
              <div class="line"></div>
            </div>
            <div class="t-p-l">
              <img src="/images/Login/qq.svg" alt="" :plain="true" @click="open4">
              <img src="/images/Login/wx.svg" alt="" :plain="true" @click="open4">
            </div>
          </div>
        </div>
        <!-- 注册 -->
        <div v-if="signChange" class="sign">
          <h2>注册</h2>
          <form action="">
            <div class="form-i">
              <el-input placeholder="请输入手机号" v-model="username" @keyup="usernameInput" @keydown.enter.prevent style="height: 50px;width: 340px"></el-input>
              <span>{{ usernameSpan }}</span>
            </div>
            <div class="form-i">
              <div class="vcode">
                <el-input placeholder="请输入验证码" v-model="vcodeInp" @keyup="vcodeInput" @keydown.enter.prevent style="height: 50px;width: 213px">
                </el-input>
                <div class="vcode-t" @click="vcodeBut">{{ vcode }}</div>
              </div>
              <span>{{ vcodeSpan }}</span>
            </div>
            <div class="form-i">
              <div class="vcode">
                <el-input placeholder="请输入短信验证码" v-model="vcodeIsmsInp" @keyup="vcodeIsmsBut" @keydown.enter.prevent
                  style="height: 50px;border-right: none;border-radius: 4px 0 0 4px;"></el-input>
                <button class="sms" @click="verCode" v-if="flag">获取验证码</button>
                <button class="sms" v-else>{{ countDown }}S</button>
              </div>
              <span>{{ vcodeIsmsSpan }}</span>
            </div>
            <div class="form-i">
              <el-input placeholder="请输入密码" v-model="password" @keyup="passwordInput" @keydown.enter.prevent show-password
                style="height: 50px"></el-input>
              <span>{{ passwordSpan }}</span>
            </div>
            <div class="form-i-i">
              <div class="agreement">
                <input type="checkbox" class="el-checkbox__inner" v-model="agreementInp" @click="agreementBut">
                <div>
                  我已阅读并同意
                  <a href="">《用户服务协议》</a>
                </div>
              </div>
              <span>{{ agreementSpan }}</span>
            </div>
          </form>
          <button :plain="true" class="but-sign" @click="signBut">立即注册</button>
          <div class="password-l">
            <div>已有账号，<span @click="loginSwitch">去登录</span></div>
          </div>
        </div>
        <!-- 忘记密码 -->
        <div v-if="forgotPasswordChange" class="forgotPassword sign">
          <h2>忘记密码</h2>
          <form action="">
            <div class="form-i">
              <el-input placeholder="请输入手机号" v-model="username" @keyup="usernameInput" @keydown.enter.prevent style="height: 50px;width: 340px"></el-input>
              <span>{{ usernameSpan }}</span>
            </div>
            <div class="form-i">
              <div class="vcode">
                <el-input placeholder="请输入验证码" v-model="vcodeInp" @keyup="vcodeInput" @keydown.enter.prevent style="height: 50px;width: 213px">
                </el-input>
                <div class="vcode-t" @click="vcodeBut">{{ vcode }}</div>
              </div>
              <span>{{ vcodeSpan }}</span>
            </div>
            <div class="form-i">
              <div class="vcode">
                <el-input placeholder="请输入短信验证码" v-model="vcodeIsmsInp" @keyup="vcodeIsmsBut" @keydown.enter.prevent style="height: 50px;border-right: none;border-radius: 4px 0 0 4px;"></el-input>
                <button class="sms" @click="verCode" v-if="flag">获取验证码</button>
                <button class="sms" v-else>{{ countDown }}S</button>
              </div>
              <span>{{ vcodeIsmsSpan }}</span>
            </div>
            <div class="form-i">
              <el-input placeholder="请输入新密码" v-model="password" @keyup="passwordInput" @keydown.enter.prevent show-password style="height: 50px"></el-input>
              <span>{{ passwordSpan }}</span>
            </div>
          </form>
          <button class="but-sign" @click="forgotPasswordBut">修改密码</button>
          <div class="password-p">
            <div class="cursorP" @click="loginSwitch">去登录</div>
            <div class="cursorP" @click="signSwitch">注册</div>
          </div>
        </div>
      </div>
    </main>
    <Footer></Footer>
    <input type="text">
  </div>
</template>

<script setup>
import Header from "../components/Header.vue";
import Footer from "../components/Footer.vue";
import { ElMessage, ElMessageBox } from 'element-plus'
import { ref,reactive,onMounted,watch,getCurrentInstance } from "vue";
import { useRoute,useRouter } from 'vue-router';
import store from "../store";

const route = useRoute();
const router = useRouter();
// console.log(router.query.type);


// getCurrentInstance() 获取当前组件实例
// ⽅式⼀，这种⽅式只能在开发环境下使⽤，⽣产环境下的ctx将访问不到
// const { ctx }  = getCurrentInstance();
// ⽅式⼆，此⽅法在开发环境以及⽣产环境下都能放到组件上下⽂对象（推荐）
const { proxy } = getCurrentInstance();

// 登录注册模块状态
let loginChange = ref(true);
let signChange = ref(false);
let forgotPasswordChange = ref(false);

watch(route,(newV)=>{
  // 用户在登录页面点击头部登录时
  if (newV.query.type === "register") {
    loginChange.value = false;
    signChange.value = true;
    forgotPasswordChange.value = false;
  }else {
    loginChange.value = true;
    signChange.value = false;
    forgotPasswordChange.value = false;
  }
})

// 判断用户是点击那个按钮进入
onMounted(()=>{
  if (route.query.type === "register") {
    loginChange.value = false;
    signChange.value = true;
  }
})

// 后缀span为对应提示语
// 手机号验证
let username = ref();
let usernameSpan = ref();
const usernameInput = ()=>{
  if (username.value.match(/^(86|0086)?1[3456789]\d{9}$/g)) {
    usernameSpan.value = "";
  } else if (username.value === "") {
    usernameSpan.value = "请输入电话号码";
  } else {
    usernameSpan.value = "请输入正确的号码格式";
  }
}
// 密码验证
let password = ref();
let passwordSpan = ref();
const passwordInput = ()=>{
  if (password.value.match(/^[0-9a-zA-Z_]{6,12}$/g)) {
    passwordSpan.value = "";
  } else if (password.value === "") {
    passwordSpan.value = "密码不能为空";
  } else {
    passwordSpan.value = "密码格式为6-12的数字字母下划线";
  }
}
// 验证码
let vcode = ref(parseInt(Math.random() * 89999) + 10000);
let vcodeSpan = ref();
let vcodeInp = ref();
const vcodeBut = ()=>{
  vcode.value = parseInt(Math.random() * 89999) + 10000;
}
const vcodeInput = ()=>{
  if (vcodeInp.value.length != 5) {
    vcodeSpan.value = "验证码长度为五";
  } else {
    vcodeSpan.value = "";
  }
}
// 短信验证码
let vcodeIsmsInp = ref();
let vcodeIsmsSpan = ref();
const vcodeIsmsBut = ()=>{
  if (vcodeIsmsInp.value.length != 6) {
    vcodeIsmsSpan.value = "短信验证码为六位数"
  } else {
    vcodeIsmsSpan.value = ""
  }
}
// 发送短信验证码
let countDown = ref(60);
let flag = ref(true);
let rdm = ref(null);
let timer;
let verCode = ()=>{
  flag.value = false;
  proxy.$post('/api/email').then(data => {
    timer = setInterval(() => {
      if (countDown.value != 0) {
        countDown.value--
      } else {
        flag.value = true;
        clearInterval(timer);
        countDown.value = 60;
        rdm.value = null;
      }
    }, 999)
    console.log(data);
    rdm.value = data;
  })
}

// 用户协议
let agreementInp = ref(false);
let agreementSpan = ref();
const agreementBut = ()=>{
  if (agreementInp.value == true) {
    agreementSpan.value = "你需要同意用户协议才能注册";
  } else {
    agreementSpan.value = "";
  }
}

// 登录按钮事件
const loginBut = ()=>{
  if (username.value === "") {
    usernameSpan.value = "电话号码不能为空";
  }
  if (password.value === "") {
    passwordSpan.value = "密码密码不能为空";
  }
  if (vcodeInp.value === "") {
    vcodeSpan.value = "验证码不能为空";
  } else if (vcodeInp.value != vcode.value) {
    vcodeSpan.value = "验证码错误";
  }
  // 登录成功事件
  if (username.value.match(/^(86|0086)?1[3456789]\d{9}$/g) &&
      password.value.match(/^[0-9a-zA-Z_]{6,12}$/g) &&
      vcodeInp.value == vcode.value){
    // 发送数据到后端
    proxy.$post("/api/users/login", {
      mobilePhone: username.value,
      password: password.value
    }).then((data)=>{
      // 成功
      if (data.code === 200) {
        // 提示
        ElMessage({
          message: '欢迎 '+data.nickname,
          type: 'success',
        })
        // 保存token
        window.localStorage.setItem("token", data.token);
        // 跳转 login
        router.push('/');
      }else { // 失败
        ElMessage.error(data.msg);
      }
    })
  }
  
}

// 注册按钮事件
const signBut = ()=>{
  // 手机号判断
  if (username.value === "") {
    usernameSpan.value = "电话号码不能为空";
  }
  // 密码判断
  if (password.value === "") {
    passwordSpan.value = "密码不能为空";
  }
  // 验证码判断
  if (vcodeInp.value === "") {
    vcodeSpan.value = "验证码不能为空";
  } else if (vcodeInp.value != vcode.value) {
    vcodeSpan.value = "验证码错误";
  }
  // 短信验证码判断
  if (!vcodeIsmsInp.value) {
    vcodeIsmsSpan.value = "短信验证码不能为空"
  }else if (Number(vcodeIsmsInp.value) !== rdm.value) {
    vcodeIsmsSpan.value = "短信验证码输入不正确"
  }
  // 用户协议判断
  if (agreementInp.value != true) {
    agreementSpan.value = "你需要同意用户协议才能注册";
  }
  // 注册成功事件
  if (username.value.match(/^(86|0086)?1[3456789]\d{9}$/g) &&
      password.value.match(/^[0-9a-zA-Z_]{6,12}$/g) &&
      vcodeInp.value == vcode.value &&
      agreementInp.value == true &&
      Number(vcodeIsmsInp.value) === rdm.value) {
      // 发送数据到后端
      proxy.$post("/api/users/register", {
        mobilePhone: username.value,
        password: password.value
      }).then((data) => {
        // 成功
        if (data.code === 200) {
          // 提示
          ElMessage({
            message: data.msg,
            type: 'success',
          })
          // 跳转 login
          setTimeout(() => {
            router.push('/login?type=login');
            loginSwitch();
          }, 2000)
        } else { // 失败
          ElMessage.error(data.msg);
        }
      })
  }
}

// 忘记密码按钮事件
const forgotPasswordBut = ()=>{
  if (username.value === "") {
    usernameSpan.value = "电话号码不能为空";
  }
  if (password.value === "") {
    passwordSpan.value = "密码不能为空";
  }
  if (vcodeInp.value === "") {
    vcodeSpan.value = "验证码不能为空";
  } else if (vcodeInp.value != vcode.value) {
    vcodeSpan.value = "验证码错误";
  }
  if (!vcodeIsmsInp.value) {
    vcodeIsmsSpan.value = "短信验证码不能为空"
  }
  // 忘记密码成功修改事件
  if (username.value.match(/^(86|0086)?1[3456789]\d{9}$/g) && vcodeInp.value == vcode.value && Number(vcodeIsmsInp.value) === rdm.value) {
      // 发送数据到后端
      proxy.$post("/api/users/forgotPassword", {
        mobilePhone: username.value,
        password: password.value
      }).then((data) => {
        if(data.code===200){
          ElMessage({
            message: data.msg,
            type: 'success',
          })
          setTimeout(() => {
            router.push('/login?type=login');
            loginSwitch();
          }, 2000)
        }else{
          ElMessage.error({
            message: data.msg,
            type: 'success',
          })
        }
      })
  }
}

const open4 = () => {
  ElMessage({
    message: '功能正在开发中，敬请期待',
    type: 'warning',
  })
}
// 公共部分
const fn = ()=>{
  // 清空各个输入框
  username.value = "";
  password.value = "";
  vcodeInp.value = "";
  vcodeIsmsInp.value = "";
  // 清除各个输入框的提示语
  usernameSpan.value = "";
  passwordSpan.value = "";
  vcodeSpan.value = "";
  vcodeIsmsSpan.value = "";
  // 切换时重新生成验证码
  vcode.value = parseInt(Math.random() * 89999) + 10000;
  agreementSpan.value = "";
  agreementInp.value = false;
  // 清除验证码定时器
  flag.value = true;
  clearInterval(timer);
  countDown.value = 60;
  rdm.value = null;
}
// 登录注册与忘记密码切换
const loginSwitch = ()=>{
    loginChange.value = true;
    signChange.value = false;
    forgotPasswordChange.value = false;
    fn();
}
const signSwitch = ()=>{
    loginChange.value = false;
    signChange.value = true;
    forgotPasswordChange.value = false;
    fn();
}
const forgotPasswordSwitch = ()=>{
    loginChange.value = false;
    signChange.value = false;
    forgotPasswordChange.value = true;
    fn();
}


</script>

<style lang="less" scoped>
* {
  box-sizing: border-box;
}
a {
  text-decoration: none;
}
// 输入框错误样式
.spanInp {
  border-color: #f56c6c !important;
}
#Login {
  position: relative;
  background: url(/images/Login/loginBanner.jpg) no-repeat 50%;
  background-size: cover;
  height: 100vh;
  min-width: 1200px;
  h2 {
    text-align: center;
    font-size: 28px;
    margin-bottom: 40px;
  }
  // 登录和注册的按钮
  button {
    display: inline-block;
    width: 100%;
    height: 50px;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    background: #fff;
    border: 1px solid #dcdfe6;
    color: #606266;
    -webkit-appearance: none;
    text-align: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    outline: 0;
    margin: 0;
    -webkit-transition: .1s;
    transition: .1s;
    font-weight: 500;
    padding: 12px 20px;
    font-size: 14px;
    border-radius: 4px;
    transition: .2s all;
    margin-bottom: 15px;
    margin-top: 20px;
  }
  button:hover {
    color: #409EFF;
    border: #C6E2FF solid 1px;
    background-color: #ECF5FF;
  }
  // 所有input的样式
  input {
    width: 340px;
    height: 50px;
    padding: 0px 15px;
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    line-height: 40px;
    outline: 0;
    -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    
  }
  // 各个输入框外div
  .form-i {
    height: 77px;
  }
  // 包裹登录和注册的
  .login-a {
    width: 440px;
    height: 570px;
    background-color: white;
    display: flex;
    justify-content: center;
    padding: 40px 50px;
    border-radius: 10px;
    position: absolute;
    right: 360px;
    top: 15%;
    // 各个输入框的提示文字
    span {
      color: #F56C6C;
      font-size: 12px;
    }
     // 登录
    .login-s {
      form {
        width: 340px;
        height: 210px;
      }
      // 验证码外
      .vcode {
        display: flex;
        justify-content: space-between;
        // 验证码生成
        .vcode-t {
          width: 119px;
          height: 50px;
          border: #dcdfe6 solid 1px;
          border-radius: 5px;
          cursor: pointer;
          text-align: center;
          line-height: 50px;
          background: url(../../public/images/Login/OIP-C.jpg) no-repeat;
          user-select: none;
          opacity: 0.7;
          font-weight: 700;
          color: black;
        }
        // 验证码输入框
        .vcode-i {
          width: 213px;
        }
      }
    }
    // 忘记密码
    .password-f {
      display: flex;
      justify-content: space-between;
      margin-bottom: 25px;
      div {
        cursor: pointer;
      }
    }
    // 第三方登录头部
    .third-party-login {
      .h-line {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #999999;
        .line {
          width: 123px;
          height: 1.5px;
          background: #e0e0e0;
        }
      }
    }
    // 第三方登录图标
    .t-p-l {
      margin-top: 25px;
      display: flex;
      justify-content: center;
      img {
        margin: 0px 15px;
        cursor: pointer;
      }
    }
    // 注册
    .sign {
      // 注册按钮
      .but-sign {
        margin-top: 0;
      }
      form {
        margin-bottom: 15px;
        .agreement {
          display: flex;
          align-items: center;
          input {
            width: 14px;
            height: 14px;
            margin-right: 10px;
          }
          a {
            color: #3A8EE6;
          }
        }
      }
      .form-i-i {
        height: 25px;
      }
      .password-l {
        display: flex;
        justify-content: flex-end;
        span {
          display: inline;
          font-size: 14px;
          color: #3A8EE6;
          cursor: pointer;
        }
      }
      .password-p {
        display: flex;
        justify-content: space-between;
      }
      // 验证码外
      .vcode {
        display: flex;
        justify-content: space-between;
        button {
          margin: 0;
          background-color: #E0E0E0;
          border-top-left-radius: 0px;
          border-bottom-left-radius: 0px;
        }
        button:hover {
          background-color: #3A8EE6;
          color: white;
        }
        .sms {
          width: 127px;
        }
        // 验证码生成
        .vcode-t {
          width: 119px;
          height: 50px;
          border: #dcdfe6 solid 1px;
          border-radius: 5px;
          cursor: pointer;
          text-align: center;
          line-height: 50px;
          background: url(/images/Login/OIP-C.jpg) no-repeat;
          user-select: none;
          opacity: 0.7;
          font-weight: 700;
          color: black;
        }
        // 验证码输入框
        .vcode-i {
          width: 213px;
        }
      }
    }
  }
  .cursorP {
    cursor: pointer;
  }
}


</style>